<template>
  <div>
    <Card>
      <div style="width: 95%; margin: 0 auto" class="conner_box">
        <div style="float: left; width: 30%">
          <span style="margin-right: 20px">话题名称关键字搜索</span>
          <div style="display: inline-block">
            <el-input
              placeholder="话题名称关键字搜索"
              v-model="TopicKeywords"
              clearable
            >
            </el-input>
          </div>
        </div>
        <div style="float: left; width: 30%">
          <span style="margin-right: 20px">话题发布时间</span>
          <div style="display: inline-block">
            <el-date-picker
              v-model="TopicTime"
              type="datetime"
              placeholder="    请选择"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              prefix-icon=""
            >
            </el-date-picker>
          </div>
        </div>

        <div style="float: right; margin-top: 50px">
          <div style="display: inline-block; margin-right: 20px">
            <button-cn text="查询" @myclick="query"></button-cn>
          </div>
          <div style="display: inline-block">
            <button-cn text="重置" @myclick="resetbtn"></button-cn>
          </div>
        </div>
      </div>
    </Card>
    <div class="itemList">
      <span>笔记管理</span>
      <div style="float: right; margin-left: 10px">
        <!-- <button-cn text="发布" iconShow @myclick="release"></button-cn> -->
      </div>
      <div style="float: right">
        <button-cn
          text="新增话题"
          iconShow
          @myclick="pushconversation"
        ></button-cn>
      </div>
    </div>
    <Card>
      <el-table :data="topiclistdata" style="width: 100%">
        <el-table-column
          prop="communitytopic_topic"
          label="话题名称"
          align="center"
        >
        </el-table-column>
        <el-table-column label="显示状态" align="center">
          <template slot-scope="scope">
            <!-- {{scope.$index}} -->
            <el-tag type="success" v-show="scope.row.communitytopic_state == 1"
              >上线</el-tag
            >
            <el-tag type="danger" v-show="scope.row.communitytopic_state == 2"
              >下线</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="详情" align="center">
          <template slot-scope="scope">
            <button-cn
              text="查看详情"
              @myclick="viewdetails(scope.row.communitytopic_id)"
            ></button-cn>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="450" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-show="scope.row.communitytopic_top == 1"
              @click="clonecommunitytopic(scope.row.communitytopic_id)"
              >取消</el-button
            >
            <button-cn
              v-show="scope.row.communitytopic_top == 2"
              text="置顶"
              @myclick="topingtopic(scope.row.communitytopic_id)"
              class="inlinblock"
            ></button-cn>

            <button-cn
              text="话题更新"
              @myclick="topicupdata(scope.row)"
              class="inlinblock"
            ></button-cn>
          </template>
        </el-table-column>
      </el-table>
    </Card>

    <alert-cn
      :alertShow="viewdetailsstate"
      title="话题详情"
      rightText="确认"
      leftText="取消"
      @confirm="addtopicbtn"
      @cancel="viewdetailsstate = false"
      @clone="viewdetailsstate = false"
    >
      <el-row :gutter="18">
        <el-col :span="6"
          ><div class="grid-content bg-purple">参与人数</div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">内容数量</div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">总点赞数</div></el-col
        >
      </el-row>
      <el-row :gutter="18">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            {{ topicobject.participants_num || 1000 }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            {{ topicobject.data.total || 0 }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            {{ topicobject.total_like }}
          </div></el-col
        >
      </el-row>
    </alert-cn>
    <alert-cn
      :alertShow="Topiceditorsate"
      title="话题编辑"
      rightText="确认"
      leftText="取消"
      @confirm="confirmedit"
      @cancel="Topiceditorsate = false"
      @clone="Topiceditorsate = false"
    >
      <el-form :model="Topicdetailsobj" label-width="140px">
        <el-form-item label="话题">
          <el-input
            v-model.trim="Topicdetailsobj.communitytopic_topic"
          ></el-input>
        </el-form-item>
        <el-form-item label="话题说明">
          <el-input
            v-model.trim="Topicdetailsobj.communitytopic_explain"
          ></el-input>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-radio-group
            v-model="Topicdetailsobj.communitytopic_state"
            @change="radiochange"
          >
            <el-radio :label="1">上线</el-radio>
            <el-radio :label="2">下线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="bananer图">
          <img
            :src="Topicdetailsobj.communitytopic_img"
            alt=""
            class="viewimg"
          />
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topiclistimgurl"
            @imgsucc="upload($event, 'communitytopic_img')"
            ref="imgupload"
            class="inlinblock"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="列表图">
          <img
            :src="Topicdetailsobj.communitytopic_allimg"
            alt=""
            class="viewimg"
          />

          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topiclistimgurl"
            @imgsucc="upload($event, 'communitytopic_allimg')"
            ref="imgupload"
            class="inlinblock"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="详情页图片">
          <img
            :src="Topicdetailsobj.communitytopic_detailsimg"
            alt=""
            class="viewimg"
          />

          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topicdetailsimgurl"
            @imgsucc="upload($event, 'communitytopic_detailsimg')"
            ref="imgupload"
            class="inlinblock"
          ></imgUpload>
        </el-form-item>

        <el-form-item label="海报图">
          <img
            :src="Topicdetailsobj.communitytopic_posters"
            alt=""
            class="viewimg"
          />
          <imgUpload
            imgurl="https://m.asmm.vip/index.php/index/Community/uploadming"
            @imgsucc="upload($event, 'communitytopic_posters')"
            ref="imgupload"
            class="inlinblock"
          ></imgUpload>
        </el-form-item>
      </el-form>
    </alert-cn>
    <alert-cn
      :alertShow="pushconversationalert"
      title="添加话题"
      rightText="确认"
      leftText="取消"
      @confirm="addtopicbtn"
      @cancel="pushconversationalert = false"
      @clone="pushconversationalert = false"
    >
      <el-form :model="addtopicobj" label-width="140px">
        <el-form-item label="标题">
          <el-input v-model.trim="addtopicobj.topic"></el-input>
        </el-form-item>
        <el-form-item label="bananer图">
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topicbannerimgurl"
            @imgsucc="topicbannerimgurl"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="列表图">
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topiclistimgurl"
            @imgsucc="topiclistimgurl"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="详情页图片">
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topicdetailsimgurl"
            @imgsucc="topicdetailsimgurl"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="标题">
          <el-input
            v-model.trim="addtopicobj.explain"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="海报图">
          <imgUpload
            imgurl="https://m.asmm.vip/index.php/index/Community/uploadming"
            @imgsucc="uploadming"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
      </el-form>
    </alert-cn>
  </div>
</template>

<script>
import {
  addtopic,
  gettopiclist,
  topicArticlelist,
  gettextttopiclist,
  funsettopicSTop, // 话题设置置顶
  funcanceltopicTop, // 话题取消设置置顶
  funtopicReview,
} from "../../request/index";
import imgUpload from "../../components/from/imgupload.vue";
import Card from "../../components/from/card.vue";
import newupload from "../../components/from/newupload.vue";
import clearfunction from "../../utils/clear";
import axios from "axios";
export default {
  data() {
    return {
      Topiceditorsate: false,
      viewdetailsstate: false,
      topiclistdata: [],
      Topicdetailsobj: {},
      count: 10,
      page: 1,
      topictextdata: [],
      topicobject: {
        data: {
          total: 0,
        },
        total_like: null,
        add: null,
      },
      Topicid: 1,
      TopicList: [],
      TopicKeywords: "",
      TopicTime: "",
      pushconversationalert: false,
      addtopicobj: {
        topic: "",
        bannerimg: "",
        topiclistimg: "",
        topicdetailsimg: "",
        explain: "",
        posters: "",
      },
      pushnewdata: [],
    };
  },
  created() {
    gettopiclist().then((res) => {
      if (res.code != "0000") return this.$message.error(res.msg);
      // this.$message.success(res.msg);
      this.TopicList = res.data;
      // console.log(this.TopicList);
    });
    this.methodsgettextttopiclist();
    this.gettopicArticlelist(this.Topicid);
  },
  methods: {
    async confirmedit() {
      console.log(this.Topicdetailsobj);
      var obj = this.Topicdetailsobj;
      const res = await funtopicReview(
        obj.communitytopic_id,
        obj.communitytopic_topic,
        obj.communitytopic_img,
        obj.communitytopic_allimg,
        obj.communitytopic_detailsimg,
        obj.communitytopic_explain,
        obj.communitytopic_posters,
        obj.communitytopic_state
      );
      //  console.log(res);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.Topiceditorsate = false;
      this.methodsgettextttopiclist();
    },
    radiochange(value) {
      // console.log(value);
      this.Topicdetailsobj.communitytopic_state = value;
    },
    upload(url, text) {
      this.Topicdetailsobj[text] = url[0];
    },

    query() {
      // alert(111)
      this.methodsgettextttopiclist();
      console.log(1111);
      this.$message.success("查询成功");
    },
    viewdetails(id) {
      this.viewdetailsstate = true;
      this.gettopicArticlelist(id);
    },
    async clonecommunitytopic(id) {
      const res = await funcanceltopicTop(id);

      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.methodsgettextttopiclist();
    },
    async topingtopic(id) {
      var list = [];
      this.topiclistdata.map((item) => {
        // console.log(item.communitytopic_top);
        if (item.communitytopic_top == 1) {
          list.push(1);
        }
      });
      if (list.length > 2) return this.$message.error("最多只能置顶三个");
      console.log(list);

      const res = await funsettopicSTop(id);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.methodsgettextttopiclist();
    },
    async methodsgettextttopiclist() {
      const res = await gettextttopiclist(this.TopicKeywords, this.TopicTime);
      // const res = await axios("/index.php/Communitytopic/topiclist", {
      //   tittle: this.TopicKeywords,
      //   starttime: this.TopicTime,
      // });

      if (res.code !== "0000") return this.$message.error(res.msg);
      this.topiclistdata = res.data;
    },

    async gettopicArticlelist(id) {
      const res = await topicArticlelist(id, this.count, this.page);

      if (res.code !== "0000") return this.$message.error(res.msg);
      // this.$message.success(res.msg);
      console.log(res);
      this.topicobject = res;
      this.topictextdata = res.data.data;

      // res.total_like
    },
    topicupdata(scope) {
      this.Topicdetailsobj = scope;
      console.log(scope);
      this.Topiceditorsate = true;
    },

    resetbtn() {
      (this.TopicKeywords = ""), (this.TopicTime = "");
    },

    async addtopicbtn() {
      var item = this.addtopicobj;
      0;
      const res = await addtopic(
        item.topic,
        item.bannerimg,
        item.topiclistimg,
        item.topicdetailsimg,
        item.explain,
        item.posters
      );

      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      // window.on
      // location.reload();
    },

    pushconversation() {
      this.pushconversationalert = true;
    },
    topicbannerimgurl(url) {
      //  console.log(url);
      this.addtopicobj.bannerimg = url[0];
    },
    topiclistimgurl(url) {
      this.addtopicobj.topiclistimg = url[0];
    },
    topicdetailsimgurl(url) {
      this.addtopicobj.topicdetailsimg = url[0];
    },
    uploadming(url) {
      this.addtopicobj.posters = url[0];
    },
  },
  components: {
    imgUpload,
    Card,
    newupload,
  },
};
</script>

<style lang="scss" scoped>
@import "../../components/style/init_el_checkout.scss";
.conner_box ::v-deep .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 170px;
}
.conner_box ::v-deep .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 32px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.itemList {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  box-sizing: border-box;
  // margin-right: 30px;
  box-sizing: border-box;
}

.edit {
  // color: #e04e2f;
  margin-right: 10px;
  cursor: pointer;
}

.topping1 {
  cursor: pointer;
}

.topping {
  cursor: pointer;
  //  color: #eee;
  color: #e04e2f;
}
.imgbox {
  width: 100px;
}

.itemList {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  box-sizing: border-box;
  box-sizing: border-box;
}
.overtext {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
::v-deep .el-card__body .cell .imgvideo {
  width: 100% !important;
  // height: 120px !important;
}
::v-deep .el-button--primary {
  border-radius: 10rpx !important;
}
.itemList {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  box-sizing: border-box;
  // margin-right: 30px;
  box-sizing: border-box;
}
.inlinblock {
  display: inline-block;
  margin-left: 20px;
}
.bg-purple {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: normal;
}
.viewimg {
  height: 200px;
}
</style>